---
import path from "node:path";
import Comment from "@components/comment/index.astro";
import License from "@components/misc/License.astro";
import Markdown from "@components/misc/Markdown.astro";
import PasswordProtection from "@components/PasswordProtection.astro";
import I18nKey from "@i18n/i18nKey";
import { i18n } from "@i18n/translation";
import MainGridLayout from "@layouts/MainGridLayout.astro";
import { getSortedPosts } from "@utils/content-utils";
import { getDir, getPostUrlBySlug } from "@utils/url-utils";
import { Icon } from "astro-icon/components";
import { licenseConfig } from "src/config";
import ImageWrapper from "../../components/misc/ImageWrapper.astro";
import PostMetadata from "../../components/PostMeta.astro";
import { profileConfig, siteConfig } from "../../config";
import { formatDateToYYYYMMDD } from "../../utils/date-utils";
import CryptoJS from "crypto-js";
import bcryptjs from "bcryptjs";
export async function getStaticPaths() {
	const blogEntries = await getSortedPosts();
	return blogEntries.map((entry) => ({
		params: { slug: entry.slug },
		props: { entry },
	}));
}

const { entry } = Astro.props;
const { Content, headings } = await entry.render();

const { remarkPluginFrontmatter } = await entry.render();

// 处理加密逻辑
let encryptedContent = "";
let passwordHash = "";
let isEncrypted = entry.data.encrypted && entry.data.password;

if (isEncrypted) {
	// 对于加密文章，我们将使用markdown内容进行加密
	// 在客户端解密后，会通过JavaScript重新渲染markdown
	const contentToEncrypt = entry.body;

	// 使用AES加密内容
	encryptedContent = CryptoJS.AES.encrypt(
		contentToEncrypt,
		entry.data.password,
	).toString();

	// 生成密码哈希
	const saltRounds = 10;
	passwordHash = bcryptjs.hashSync(entry.data.password, saltRounds);
}

const jsonLd = {
	"@context": "https://schema.org",
	"@type": "BlogPosting",
	headline: entry.data.title,
	description: entry.data.description || entry.data.title,
	keywords: entry.data.tags,
	author: {
		"@type": "Person",
		name: profileConfig.name,
		url: Astro.site,
	},
	datePublished: formatDateToYYYYMMDD(entry.data.published),
	inLanguage: entry.data.lang
		? entry.data.lang.replace("_", "-")
		: siteConfig.lang.replace("_", "-"),
	// TODO include cover image here
};
---

<MainGridLayout
    banner={entry.data.image}
    title={entry.data.title}
    description={entry.data.description}
    lang={entry.data.lang}
    setOGTypeArticle={true}
    postSlug={entry.slug}
    headings={headings}
>
    <script
        is:inline
        slot="head"
        type="application/ld+json"
        set:html={JSON.stringify(jsonLd)}
    />
    <div
        class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4"
    >
        <div
            id="post-container"
            class:list={[
                "card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",
                {},
            ]}
        >
            <!-- word count and reading time -->
            <div
                class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition onload-animation"
            >
                <div class="flex flex-row items-center">
                    <div
                        class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2"
                    >
                        <Icon name="material-symbols:notes-rounded" />
                    </div>
                    <div class="text-sm">
                        {remarkPluginFrontmatter.words}
                        {" " + i18n(I18nKey.wordsCount)}
                    </div>
                </div>
                <div class="flex flex-row items-center">
                    <div
                        class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2"
                    >
                        <Icon
                            name="material-symbols:schedule-outline-rounded"
                        />
                    </div>
                    <div class="text-sm">
                        {remarkPluginFrontmatter.minutes}
                        {
                            " " +
                                i18n(
                                    remarkPluginFrontmatter.minutes === 1
                                        ? I18nKey.minuteCount
                                        : I18nKey.minutesCount,
                                )
                        }
                    </div>
                </div>
            </div>

            <!-- title -->
            <div class="relative onload-animation">
                <div
                    data-pagefind-body
                    data-pagefind-weight="10"
                    data-pagefind-meta="title"
                    class="transition w-full block font-bold mb-3
                    text-3xl md:text-[2.25rem]/[2.75rem]
                    text-black/90 dark:text-white/90
                    md:before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
                    before:absolute before:top-[0.75rem] before:left-[-1.125rem]"
                >
                    {entry.data.title}
                </div>
            </div>

            <!-- metadata -->
            <div class="onload-animation">
                <PostMetadata
                    class="mb-5"
                    published={entry.data.published}
                    updated={entry.data.updated}
                    tags={entry.data.tags}
                    category={entry.data.category}
                />
                {
                    !entry.data.image && (
                        <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5" />
                    )
                }
            </div>

            <!-- always show cover as long as it has one -->

            {
                entry.data.image && (
                    <ImageWrapper
                        id="post-cover"
                        src={entry.data.image}
                        basePath={path.join("content/posts/", getDir(entry.id))}
                        class="mb-8 rounded-xl banner-container onload-animation"
                    />
                )
            }

            {
                isEncrypted ? (
                    <PasswordProtection
                        encryptedContent={encryptedContent}
                        passwordHash={passwordHash}
                    />
                ) : (
                    <>
                        <Markdown class="mb-6 markdown-content onload-animation">
                            <Content />
                        </Markdown>
                        {licenseConfig.enable && (
                            <License
                                title={entry.data.title}
                                slug={entry.slug}
                                pubDate={entry.data.published}
                                author={entry.data.author}
                                sourceLink={entry.data.sourceLink}
                                licenseName={entry.data.licenseName}
                                licenseUrl={entry.data.licenseUrl}
                                class="mb-6 rounded-xl license-container onload-animation"
                            />
                        )}
                    </>
                )
            }
        </div>
    </div>

    <!-- 评论 -->
    <Comment post={entry} />

    <div
        class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full"
    >
        <a
            href={entry.data.nextSlug
                ? getPostUrlBySlug(entry.data.nextSlug)
                : "#"}
            class:list={[
                "w-full font-bold overflow-hidden active:scale-95",
                { "pointer-events-none": !entry.data.nextSlug },
            ]}
        >
            {
                entry.data.nextSlug && (
                    <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-start gap-4">
                        <Icon
                            name="material-symbols:chevron-left-rounded"
                            class="text-[2rem] text-[var(--primary)]"
                        />
                        <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
                            {entry.data.nextTitle}
                        </div>
                    </div>
                )
            }
        </a>

        <a
            href={entry.data.prevSlug
                ? getPostUrlBySlug(entry.data.prevSlug)
                : "#"}
            class:list={[
                "w-full font-bold overflow-hidden active:scale-95",
                { "pointer-events-none": !entry.data.prevSlug },
            ]}
        >
            {
                entry.data.prevSlug && (
                    <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-end gap-4">
                        <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
                            {entry.data.prevTitle}
                        </div>
                        <Icon
                            name="material-symbols:chevron-right-rounded"
                            class="text-[2rem] text-[var(--primary)]"
                        />
                    </div>
                )
            }
        </a>
    </div>
</MainGridLayout>
